<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>POLO360练习</title>
		<!-- 引入reset.css 清楚浏览器默认样式 -->
		<link rel="stylesheet" type="text/css" href="css/reset.min.css" />
		<link rel="stylesheet" type="text/css" href="css/page-index.min.css" />
	</head>
	<body>
		<!-- header开始 -->
		<div class="header w">
			<!-- 
			导航条
			猜想：这里的ul不是div，不会出现父子外边距问题。
			 -->
			<ul class="nav">
				<li>
					<a href="#">HOME</a>
					<p>Back to home</p>
				</li>
				<li>
					<a href="#">PRODUCTS</a>
					<p>What we have for you</p>
				</li>
				<li>
					<a href="#">SERVICES</a>
					<p>Things we do</p>
				</li>
				<li>
					<a href="#">BLOG</a>
					<p>Follow our updates</p>
				</li>
				<li>
					<a href="#">CONTACT</a>
					<p>Ways to reach us</p>
				</li>
			</ul>

			<div class="logo" title="一个非常好的网站">
				<a href="#">
					<!-- 
					IE6中，不支持logo中的透明通道 
					需要引入js文件
					-->
					<img src="img/logo.png" alt="logo">
				</a>
			</div>
		</div>
		<!-- header结束 -->

		<!-- banner 开始 -->
		<div class="banner w">
			<img src="img/banner/banner01.png" alt="这是一个图片">

			<!-- 创建div放置banner导航按钮 -->
			<div class="pointerDiv">
				<a href="#"></a>
				<a href="#" class="active"></a>
				<a href="#"></a>
				<a href="#"></a>
				<a href="#"></a>
			</div>
		</div>
		<!-- banner 结束 -->

		<!-- 
		content 开始
		注意：这里的三个div使用的是float，会导致高度塌陷。
		 -->
		<div class="content w clearfix">
			<h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h1>
			<!-- 放置内容的三个div -->
			<div class="pl">
				<h2>Perfect Logic</h2>
				<p class="p1">All you want your website to do.</p>
				<!-- 创建图片的div -->
				<div class="imgDiv">
					<img src="img/pic/pic1.jpg" alt="小男孩">
				</div>
				<p class="p2">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
					totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
					explicabo.</p>
				<a href="#" class="lm">Learn More</a>
			</div>
			<div class="cs">
				<h2>Complete Solution</h2>
				<p class="p1">A tool anything and everything you can think</p>
				<!-- 创建图片的div -->
				<div class="imgDiv">
					<img src="img/pic/pic2.jpg" alt="小女孩">
				</div>
				<p class="p2">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
					magni dolores eos qui ratione voluptatem sequi nesciun tdolore magnam aliquam quaerat voluptatem.</p>
				<a href="#" class="lm">Learn More</a>
			</div>
			<div class="uc">
				<h2>Uber Culture</h2>
				<p class="p1">Fresh. Modern and ready for future</p>
				<!-- 创建图片的div -->
				<div class="imgDiv">
					<img src="img/pic/pic3.jpg" alt="绿色的球">
				</div>
				<p class="p2">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed
					quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</p>
				<a href="#" class="lm">Learn More</a>
			</div>
		</div>
		<!-- content 结束 -->

		<!-- contact 开始 这里要注意防止高度塌陷，加上clearfix -->
		<div class="contact w clearfix">
			<div class="sc">
				<h2>Social Connection</h2>
				<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
				<div class="icon">
					<!-- 两个元素之间会默认带上空格，使用font-size: 0;消除空格。这个空格的大小相当于文字 -->
					<a href="#"><img src="img/rss.png"></a>
					<a href="#"><img src="img/fb.png"></a>
					<a href="#"><img src="img/in.png"></a>
					<a href="#"><img src="img/yt.png"></a>
					<a href="#"><img src="img/tw.png"></a>
				</div>
				<h2 class="nl">Newsletter</h2>
				<p class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium</p>
				<input type="text" class="text" placeholder="your email address" />
				<button class="btn" type="submit">Send it</button>
			</div>
			<div class="co">
				<!-- 创建一个标题 -->
				<h2>Contact</h2>
				<!-- 表单 -->
				<form action="#" method="post">
					<!-- placeholder 在 <=IE8 的浏览器中不支持，需要使用JS -->
					<input type="text" class="text" placeholder="your name" />
					<input type="text" class="text" placeholder="your email address" />
					<textarea class="tarea" placeholder="message"></textarea>
					<button class="btn" type="submit">Send it</button>
				</form>
			</div>
			<div class="nu">
				<h2>News Updates</h2>
				<p class="p1">
					<!-- 这里希望能让文字环绕图片 -->
					<img src="img/right_1.png" >
					<span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span>
				</p>
				<p class="p2">
					<!-- 这里希望能让文字环绕图片 -->
					<img src="img/right_2.png" >
					<span>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</span>
				</p>
				<p class="p3">
					<!-- 这里希望能让文字环绕图片 -->
					<img src="img/right_3.png" >
					<span>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.</span>
				</p>
				<button class="btn" type="submit">Visit our Blog</button>
			</div>
		</div>
		<!-- contact 结束 -->
		
		<!-- footer 开始 -->
		<div class="footer">
			<div class="w">
				<p class="p1">Copyright 2010. Studio VIVROCKS. All Rights Reserved.</p>
				<p>Site Powered by Wordpress. Design and Developed by VIVROCKS.</p>
				<p><a href="#">Home</a> | <a href="#">About</a> | <a href="#">Products</a> | <a href="#">Services</a> | <a href="#">Contact</a></p>
				<p><a href="#">Privacy Policy</a> | <a href="#">Terms of use</a></p>
			</div>
		</div>
		<!-- footer 结束 -->

		<!-- 处理IE6的png问题 -->
		<!-- [if IE 6]>
		<script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>
		<script type="text/javascript"> DD_belatedPNG.fix("div, img, a, h1"); </script>
		<![endif] -->
	</body>
</html>
